<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            label-width="auto"
            v-show="showSearch"
        >
            <el-row>
                <el-form-item label="纸张编码" prop="code">
                    <el-input
                        v-model.trim="queryParams.code"
                        clearable
                        style="width: 180px"
                        placeholder="请输入纸张编码"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="纸张名称" prop="name">
                    <el-input
                        v-model.trim="queryParams.name"
                        clearable
                        style="width: 180px"
                        placeholder="请输入纸张名称"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <!-- clearable -->
                <el-form-item label="查询日期" prop="allotDate">
                    <el-date-picker
                        style="width: 180px"
                        clearable
                        v-model="queryParams.serachDate"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择时间"
                    />
                </el-form-item>
                <div class="operation">
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    <el-button @click="advanced = !advanced">
                        <a style="color: #448ef7">
                            <el-icon v-if="advanced">
                                <ArrowUpBold />
                            </el-icon>
                            <el-icon v-else>
                                <ArrowDownBold />
                            </el-icon>
                        </a>
                    </el-button>
                    <right-toolbar
                        style="margin-left: 10px"
                        :search="false"
                        v-model:showSearch="showSearch"
                        @queryTable="getList"
                        :columns="columns"
                    ></right-toolbar>
                </div>
            </el-row>
            <el-row v-if="advanced">
                <el-form-item label="纸张品牌" prop="brand">
                    <el-select
                        v-model="queryParams.brand"
                        clearable
                        filterable
                        placeholder="请选择纸张品牌"
                        style="width: 180px"
                    >
                        <el-option
                            v-for="item in mes_paper_brand"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="规格型号" prop="specs">
                    <el-select
                        v-model="queryParams.specs"
                        clearable
                        placeholder="选择规格型号"
                        style="width: 180px"
                    >
                        <el-option
                            v-for="item in mes_paper_specs"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
              
                <!-- <el-form-item label="仓库" prop="name">
                    <el-input v-model.trim="queryParams.name" clearable style="width: 180px;" placeholder="请输入仓库"
                        @keyup.enter="handleQuery" />
                </el-form-item> -->
                <el-form-item label="厂/客料" prop="material">
                    <el-select
                        v-model="queryParams.material"
                        clearable
                        placeholder="选择厂/客料"
                        style="width: 180px"
                    >
                        <el-option
                            v-for="item in mes_paper_material"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="定量" prop="weight">
                    <el-input
                        type="number"
                        v-model.trim="queryParams.weight"
                        style="width: 180px"
                        placeholder="请输入定量"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-row>
                <el-form-item label="单位" prop="unit">
                    <el-select
                        v-model="queryParams.unit"
                        clearable
                        placeholder="选择单位"
                        style="width: 180px"
                    >
                        <el-option
                            v-for="item in mes_paper_unit"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="幅宽" prop="longWide">
                    <el-input
                        v-model.trim="queryParams.longWide"
                        clearable
                        style="width: 180px"
                        placeholder="请输入幅宽"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="纸张类型" prop="packageType">
                    <el-select
                      v-model="queryParams.packageType"
                      clearable
                      placeholder="请选择类型"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in mes_paper_package"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                 </el-form-item>
            </el-row>
         </el-row>
        </el-form>
        <div>
            <el-row>
                <!-- <el-button type="primary" @click="choiceFunction">选择机台 / 仓库</el-button> -->
                <el-form-item label="选择机台/仓库">
                    <el-select v-model="choice" @change="changeFun" clearable style="width: 180px">
                        <el-option
                            v-for="item in Myoptions"
                            :key="item.pid"
                            :label="item.machineName"
                            :value="item.pid"
                        />
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
                    </el-col>
                </el-row>
            <el-table  height="65vh" v-loading="loading" :data="dataList" border
            :summary-method="getSummaries"
                show-summary>
                <el-table-column label="序号" width="60" type="index" align="center" />
                <!-- <el-table-column v-if="columns[0].visible" label="状态" min-width="150" align="center" prop="status"
                    :show-overflow-tooltip="true">
                    <template #default="scope">
                        <dict-tag :options="mes_people_status" :value="scope.row.status" />
                    </template>
                </el-table-column> -->
                <el-table-column
                    v-if="columns[0].visible"
                    label="仓库/机台"
                    min-width="150"
                    align="center"
                    prop="store"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    v-if="columns[2].visible"
                    label="厂/客料"
                    min-width="120"
                    align="center"
                    prop="material"
                    :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_material" :value="scope.row.material" />
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[3].visible"
                    label="纸张编码"
                    min-width="150"
                    align="center"
                    prop="code"
                    :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <el-button type="primary" text @click="handleCode(scope.row)">
                            {{ scope.row.code }}
                        </el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column v-if="columns[4].visible" label="自有编码" min-width="150" align="center"
                    prop="originalCode" :show-overflow-tooltip="true">
                </el-table-column> -->
                <el-table-column
                    v-if="columns[5].visible"
                    label="纸张名称"
                    min-width="180"
                    align="center"
                    prop="name"
                />
                <el-table-column
                    v-if="columns[6].visible"
                    label="纸张类型"
                    min-width="150"
                    align="center"
                    prop="packageType"
                    :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_package" :value="scope.row.packageType" />
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    v-if="columns[7].visible"
                    label="规格型号"
                    min-width="120"
                    align="center"
                    prop="specs"
                    :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_specs" :value="scope.row.specs" />
                    </template>
                </el-table-column> -->
                <el-table-column
                    v-if="columns[8].visible"
                    label="规格"
                    min-width="110"
                    align="center"
                    prop="specs"
                >
                <template #default="scope">
                    <span v-if="scope.row.longWide"> 
                        {{scope.row.longWide}}
                   </span>
                    <span v-if="scope.row.specs"> 
                        <dict-tag :options="mes_paper_specs" :value="scope.row.specs" />
                    </span>
                </template>
                </el-table-column>
                <el-table-column
                    v-if="columns[12].visible"
                    width="90"
                    label="定量"
                    align="center"
                    prop="weight"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    v-if="columns[8].visible"
                    label="单位"
                    min-width="80"
                    align="center"
                    prop="unit"
                    :show-overflow-tooltip="true"
                >
                    <template #default="scope">
                        <dict-tag :options="mes_paper_unit" :value="scope.row.unit" />
                    </template>
                </el-table-column>
                <!-- <el-table-column v-if="columns[9].visible" label="纸张分类" min-width="120" align="center" prop="material">
                    <template #default="scope">
                        <dict-tag :options="mes_paper_material" :value="scope.row.material" />
                    </template>
                </el-table-column> -->
                <el-table-column
                    v-if="columns[10].visible"
                    min-width="120"
                    label="库存数量"
                    align="center"
                    prop="quantity"
                ></el-table-column>
                <!-- <el-table-column v-if="columns[11].visible" width="120" label="金额" align="center" prop="stockPrice"
                    :show-overflow-tooltip="true">
                </el-table-column> -->

                <!-- <el-table-column
                    v-if="columns[10].visible"
                    label="幅宽"
                    align="center"
                    prop="longWide"
                ></el-table-column> -->
                <!-- <el-table-column v-if="columns[14].visible" label="宽度" align="center" prop="wide"
                    :show-overflow-tooltip="true" /> -->
                <!-- <el-table-column v-if="columns[15].visible" label="高度" align="center" prop="height"
                    :show-overflow-tooltip="true" /> -->
                <el-table-column
                    v-if="columns[16].visible"
                    label="客户"
                    width="120"
                    align="center"
                    prop="supplierName"
                />
                <el-table-column
                    v-if="columns[17].visible"
                    label="厂商"
                    align="center"
                    width="120"
                    prop="firmName"
                    
                />
                <el-table-column
                    v-if="columns[18].visible"
                    label="厂商地址"
                    align="center"
                    width="120"
                    prop="firmAddr"
                />
                <!-- <el-table-column
                    v-if="columns[19].visible"
                    label="统计数量"
                    align="center"
                    prop="total"
                /> -->
            </el-table>
           
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </div>
        <!-- <SearchWorkBench :visible="workBenchDialog" :statistics="statistics" @changeUpdate="choiceWorkBench"
            @cancel="() => { workBenchDialog = false }">
        </SearchWorkBench> -->
    </div>
</template>

<script setup name="PaperInventory">
import { getList as getDataList } from '@/api/basicInfo/workbench'
import { infoStat,paperInventoryExport } from '@/api/storage/paperDataStatistics.js'
import SearchWorkBench from '@/components/SearchWorkBench'
import { downLoadBlob } from '@/utils/ruoyi'
import { toNumber } from "@/utils/ruoyi";
const { proxy } = getCurrentInstance()
const loading = ref(false)
const dataList = ref([])
const showSearch = ref(true)
const router = useRouter()
const total = ref(0)
const advanced = ref(false)
const workBenchDialog = ref(false)
const statistics = ref(true)
const choice = ref('0')
const Myoptions = ref([])
const quantitySum = ref(0)
// { label: '仓库:纸库', value: '0' }, { label: '选择 机台', value: '1' }

const changeFun = result => {
    console.log('result', result)
    queryParams.value.machineId = result
    getList()
}
// 列显隐信息
const columns = ref([
    { key: 0, label: `状态`, visible: true },
    { key: 1, label: `仓库/机台`, visible: false },
    { key: 2, label: `厂/客料`, visible: true },
    { key: 3, label: `纸张编码`, visible: true },
    { key: 4, label: `自有编码`, visible: true },
    { key: 5, label: `纸张名称`, visible: true },
    { key: 6, label: `品牌`, visible: true },
    { key: 7, label: `规格型号`, visible: true },
    { key: 8, label: `单位`, visible: true },
    { key: 9, label: `纸张分类`, visible: true },
    { key: 10, label: `库存数量`, visible: true },
    { key: 11, label: `金额`, visible: true },
    { key: 12, label: `定量`, visible: true },
    { key: 13, label: `长度`, visible: true },
    { key: 14, label: `宽度`, visible: true },
    { key: 15, label: `高度`, visible: true },
    { key: 16, label: `客户/供应商`, visible: true },
    { key: 17, label: `厂商`, visible: true },
    { key: 18, label: `厂商地址`, visible: true },
    { key: 19, label: `统计数量`, visible: true },
])

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    Params: {
        pageNum: 1,
        pageSize: 100,
        type:"2,5",
    },
})
const getCurrentDay = () => {
    var now = new Date()
    var year = now.getFullYear()
    var month = now.getMonth() + 1 // 月份从0开始，需要加1
    var day = now.getDate()
    if (month < 10) {
        month = '0' + month
    }
    if (day >= 0 && day <= 9) {
        day = '0' + day
    }
    queryParams.value.serachDate = year + '-' + month + '-' + day
}
const { queryParams, Params } = toRefs(data)
const { mes_paper_material, mes_paper_specs, mes_paper_brand, mes_paper_unit, mes_people_status,mes_paper_package } =
    proxy.useDict(
        'mes_paper_material',
        'mes_paper_specs',
        'mes_paper_brand',
        'mes_paper_unit',
        'mes_people_status',
        'mes_paper_package'
    )

const getList = () => {
    loading.value = true
    infoStat(queryParams.value)
        .then(res => {
            loading.value = false
            if (res.rows.length > 0) {
               res.rows[0].quantitySum=0;
               res.rows.forEach(row=>{
                res.rows[0].quantitySum=res.rows[0].quantitySum+Number(row.quantity || 0);
               })
               quantitySum.value = toNumber(res.rows[0].quantitySum,3)
            }
            dataList.value = res.rows
            total.value = res.total
        })
        .catch(err => {
            loading.value = false
        })
}

// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}


// 导出
const handleExport = () => {
    paperInventoryExport(queryParams.value).then(res => {
        downLoadBlob(res, '纸张库存统计')
    })
}
/** 重置按钮操作 */
const resetQuery = () => {
    // dateRange.value = [getDateNow(), getCurrentDay()];
    proxy.resetForm('queryRef')
    handleQuery()
}

const choiceWorkBench = row => {
    queryParams.value.machineId = row.pid
    workBenchDialog.value = false
    getList()
}

const handlerefundNum = row => {
    router.push({
        path: '/storage/warehouseReceipt',
        query: {
            code: row.warehousingCode,
        },
    })
}
const handlemachineName = row => {
    router.push({
        path: '/basicInfo/supplier',
        query: {
            supplierCode: row.supplierCode,
        },
    })
}
const handleCode = row => {
    // router.push({
    //     path: '/basicInfo/paperCoding',
    //     query: {
    //         code: row.code,
    //     }
    // })
    router.push({
        path: '/basicInfo/paperCoding/details',
        query: {
            id: row.paperId,
            code: row.code,
            readonly: true,
        },
    })
}

// 合计
const getSummaries = param => {
    const { columns, data } = param
    const sums = []
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计'
            return
        }
        switch (column.property) {
            case 'quantity':
                sums[index] = quantitySum.value
                break
            default:
                break
        }
    })
    return sums
}

const getChoiceList = async () => {
    const res = await getDataList(Params.value)
     res.rows.forEach(item => {
          item.machineName=item.machineName+"/"+item.workshopName
                    })
    Myoptions.value = [{ machineName: '仓库:纸库', pid: '0' },{ machineName: '白纸裁切组', pid: '1' }, ...res.rows]
}

getCurrentDay()
queryParams.value.machineId = '0'
getList()
getChoiceList()
</script>

<style lang="scss" scoped>
.operation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
}
</style>
